<template>
	<div class="p-2">
		<el-card shadow="never">
			<approvalButton @submitForm="submitForm" @approvalVerifyOpen="approvalVerifyOpen"
				@handleApprovalRecord="handleApprovalRecord" :buttonLoading="buttonLoading" :id="form.id" :status="form.status"
				:pageType="routeParams.type" />
		</el-card>
		<el-card shadow="never" style="height: 78vh; overflow-y: auto">
			<el-form ref="leaveFormRef" v-loading="loading" :disabled="routeParams.type === 'view'" :model="form"
				:rules="rules" label-width="80px">
				<el-form-item label="请假类型" prop="leaveType">
					<el-select v-model="form.leaveType" placeholder="请选择请假类型" style="width: 100%">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="请假时间" required>
					<el-date-picker v-model="leaveTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" range-separator="To"
						start-placeholder="开始时间" end-placeholder="结束时间"
						:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
						@change="changeLeaveTime()" />
				</el-form-item>
				<el-form-item label="请假天数" prop="leaveDays">
					<el-input v-model="form.leaveDays" disabled type="number" placeholder="请输入请假天数" />
				</el-form-item>
				<el-form-item label="请假原因" prop="remark">
					<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入请假原因" />
				</el-form-item>
			</el-form>
		</el-card>
		<!-- 提交组件 -->
		<submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
		<!-- 审批记录 -->
		<approvalRecord ref="approvalRecordRef" />
		<el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" :before-close="handleClose" width="500">
			<el-select v-model="flowCode" placeholder="Select" style="width: 240px">
				<el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="handleClose">取消</el-button>
					<el-button type="primary" @click="submitFlow()"> 确认 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="Leave">
import { addLeave, getLeave, updateLeave } from '@/api/workflow/leave';
import { startWorkFlow } from '@/api/workflow/task';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
import ApprovalButton from '@/components/Process/approvalButton.vue';
const { proxy } = getCurrentInstance();

const buttonLoading = ref(false);
const loading = ref(true);
const leaveTime = ref([]);
//路由参数
const routeParams = ref({});
const options = [
	{
		value: '1',
		label: '事假'
	},
	{
		value: '2',
		label: '调休'
	},
	{
		value: '3',
		label: '病假'
	},
	{
		value: '4',
		label: '婚假'
	}
];
const flowCodeOptions = [
	{
		value: 'leave1',
		label: '请假申请-普通'
	},
	{
		value: 'leave2',
		label: '请假申请-排他网关'
	},
	{
		value: 'leave3',
		label: '请假申请-并行网关'
	},
	{
		value: 'leave4',
		label: '请假申请-会签'
	},
	{
		value: 'leave5',
		label: '请假申请-并行会签网关'
	},
	{
		value: 'leave6',
		label: '请假申请-排他并行会签'
	}
];

const flowCode = ref('');

const dialogVisible = reactive({
	visible: false,
	title: '流程定义'
});
//提交组件
const submitVerifyRef = ref();
//审批记录组件
const approvalRecordRef = ref();
//按钮组件
const approvalButtonRef = ref();

const leaveFormRef = ref();

const submitFormData = ref({
	businessId: '',
	flowCode: '',
	variables: {}
});
const taskVariables = ref({});

const initFormData = {
	id: undefined,
	leaveType: undefined,
	startDate: undefined,
	endDate: undefined,
	leaveDays: undefined,
	remark: undefined,
	status: undefined
};
const data = reactive({
	form: { ...initFormData },
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		startLeaveDays: undefined,
		endLeaveDays: undefined
	},
	rules: {
		id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
		leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'blur' }],
		leaveTime: [{ required: true, message: '请假时间不能为空', trigger: 'blur' }],
		leaveDays: [{ required: true, message: '请假天数不能为空', trigger: 'blur' }]
	}
});

const handleClose = () => {
	dialogVisible.visible = false;
	flowCode.value = '';
	buttonLoading.value = false;
};
const { form, rules } = toRefs(data);

/** 表单重置 */
const reset = () => {
	form.value = { ...initFormData };
	leaveTime.value = [];
	leaveFormRef.value?.resetFields();
};

const changeLeaveTime = () => {
	const startDate = new Date(leaveTime.value[0]).getTime();
	const endDate = new Date(leaveTime.value[1]).getTime();
	const diffInMilliseconds = endDate - startDate;
	form.value.leaveDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24)) + 1;
};
/** 获取详情 */
const getInfo = () => {
	loading.value = true;
	buttonLoading.value = false;
	nextTick(async () => {
		const res = await getLeave(routeParams.value.id);
		Object.assign(form.value, res.data);
		leaveTime.value = [];
		leaveTime.value.push(form.value.startDate);
		leaveTime.value.push(form.value.endDate);
		loading.value = false;
		buttonLoading.value = false;
	});
};

/** 提交按钮 */
const submitForm = (status) => {
	if (leaveTime.value.length === 0) {
		proxy?.$modal.msgError('请假时间不能为空');
		return;
	}
	try {
		leaveFormRef.value?.validate(async (valid) => {
			form.value.startDate = leaveTime.value[0];
			form.value.endDate = leaveTime.value[1];
			if (valid) {
				buttonLoading.value = true;
				let res;
				if (form.value.id) {
					res = await updateLeave(form.value).finally(() => (buttonLoading.value = false));
				} else {
					res = await addLeave(form.value).finally(() => (buttonLoading.value = false));
				}
				form.value = res.data;
				if (status === 'draft') {
					buttonLoading.value = false;
					proxy?.$modal.msgSuccess('暂存成功');
					proxy.$tab.closePage(proxy.$route);
					proxy.$router.go(-1);
				} else {
					if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
						flowCode.value = flowCodeOptions[0].value;
						dialogVisible.visible = true;
						return;
					}
					//说明启动过先随意穿个参数
					if (flowCode.value === '' || flowCode.value === null) {
						flowCode.value = 'xx';
					}
					await handleStartWorkFlow(res.data);
				}
			}
		});
	} finally {
		buttonLoading.value = false;
	}
};

const submitFlow = async () => {
	handleStartWorkFlow(form.value);
	dialogVisible.visible = false;
};
//提交申请
const handleStartWorkFlow = async (data) => {
	try {
		submitFormData.value.flowCode = flowCode.value;
		submitFormData.value.businessId = data.id;
		//流程变量
		taskVariables.value = {
			// leave2/6 使用的流程变量
			leaveDays: data.leaveDays,
			// leave4/5 使用的流程变量
			userList: ['1', '3', '4']
		};
		submitFormData.value.variables = taskVariables.value;
		const resp = await startWorkFlow(submitFormData.value);
		if (submitVerifyRef.value) {
			buttonLoading.value = false;
			submitVerifyRef.value.openDialog(resp.data.taskId);
		}
	} finally {
		buttonLoading.value = false;
	}
};
//审批记录
const handleApprovalRecord = () => {
	approvalRecordRef.value.init(form.value.id);
};
//提交回调
const submitCallback = async () => {
	await proxy.$tab.closePage(proxy.$route);
	proxy.$router.go(-1);
};
//审批
const approvalVerifyOpen = async () => {
	submitVerifyRef.value.openDialog(routeParams.value.taskId);
};

onMounted(() => {
	nextTick(async () => {
		routeParams.value = proxy.$route.query;
		reset();
		loading.value = false;
		if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
			getInfo();
		}
	});
});
</script>
